<!-- 评价列表 -->
<template>
  <view class="pingjia_item">
    <image
      class="avatar"
      :src="itemInfo.avatar ? itemInfo.avatar : config.imgUrl + 'head.png'"
    />
    <view class="right">
      <view class="name_time">
        <view class="name">{{ itemInfo.phoneNumber }}</view>
        <view class="time">{{ itemInfo.updateTime }}</view>
      </view>
      <view class="level">
        <view>星级</view>
        <u-rate
          :count="5"
          v-model="itemInfo.pingjiaScore"
          activeColor="#FFAF24"
          inactiveColor="#EEEEEE"
          readonly
        ></u-rate>
      </view>
      <view class="content">{{
        itemInfo.pingjiaContent ? itemInfo.pingjiaContent : ""
      }}</view>
      <view
        class="img"
        :style="{
          height: itemInfo.pingjiaPictureUrl.length
            ? getPicViewHeight(itemInfo.pingjiaPictureUrl.length) + 'rpx'
            : '',
        }"
      >
        <view
          v-if="itemInfo.pingjiaPictureUrl.length"
          @click="previewImage(itemInfo.pingjiaPictureUrl)"
        >
          <image
            v-for="(i, index) in itemInfo.pingjiaPictureUrl"
            :key="index"
            :src="i"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      config: getApp().globalData.config,
    };
  },

  created() {},

  methods: {
    // 图片预览
    previewImage(urlArr) {
      uni.previewImage({
        urls: urlArr,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
        },
      });
    },

    // 求图片盒子的高度
    getPicViewHeight(length) {
      if (length == 1 || length == 2 || length == 3) {
        return 150;
      }
      if (length == 4 || length == 5 || length == 6) {
        return 300;
      }
      if (length == 7 || length == 8 || length == 9) {
        return 450;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pingjia_item {
  width: 750rpx;
  padding: 20rpx 30rpx;
  display: flex;
  border-bottom: 2rpx solid #f2f2f2;

  .avatar {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }

  .right {
    width: 588rpx;

    .name_time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 40rpx;
      font-size: 32rpx;
      color: #333333;
      font-weight: 400;

      .time {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .content {
      min-height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      margin: 16rpx 0;
    }

    .level {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      display: flex;
      align-items: center;
    }

    .img {
      display: flex;

      image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 4rpx;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
      }
    }
  }
}
</style>
